<script setup>
import { computed } from 'vue'
import vipIcon from '@/assets/store/vip.png'

// 定义 props
const props = defineProps({
  recommend: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Number,
    default: 0, // 普通选择门店 1 //vip适用门店
  },
  item: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
})
</script>

<template>
  <div class="container" :class="{ recommend: recommend }">
    <div v-if="recommend" class="tips">附近好店</div>
    <div class="pic">
      <van-image width="100%" height="100%" radius="10" :src="item.thumbnail" />
    </div>
    <div class="info">
      <div class="top">
        <div class="title">
          <span class="title_value">{{ item.title }}</span>
          <span class="num"><van-icon name="star" color="#c10500" /> 5.0</span>
        </div>
        <div class="types">
          <van-tag v-for="(v, i) in item.categoryName" :key="i" plain type="primary">{{ v }}</van-tag>
        </div>
        <div v-if="type == 1" class="flex">
          <div class="vip_price">
            <span>5折起</span>
            <img class="vip_icon" :src="vipIcon" alt="" />
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="location">
          <div class="address_name">
            <van-icon name="location-o" color="#2e2f30" class="location_icon" />
            {{ item.address }}
          </div>
        </div>
        <!-- <div class="meter">3.07KM</div> -->
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.container {
  width: 100%;
  margin-bottom: 30px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-radius: 20px;
  padding: 40px 45px;
  background: #fff;
  justify-content: space-between;

  .tips {
    padding: 15px 27px;
    background: linear-gradient(to bottom, #00bdf9, #015fea);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 34px;
    color: #fff;
    z-index: 2;
  }

  .pic {
    min-width: 300px;
    max-width: 300px;
    height: 300px;
    border-radius: 10px;
  }

  .info {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      flex-grow: 1;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 46px;

        .title_value {
          max-width: 700px;
          // flex: 20;
          // flex-basis: 100%;
          flex-basis: 80%;
        }

        .num {
          // flex: 8;
          // flex-grow: 1;
          // min-width: 150px;
          text-align: center;
          font-size: 46px;
          color: #c10500;
        }
      }

      .types {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
      }

      .flex {
        display: flex;
        align-items: center;
        line-height: 1.6 !important;
        padding: 20px 0 0 0;
      }

      .price {
        font-size: 40px;
        color: #c10500;
        margin-right: 20px;
      }

      .vip_price {
        min-width: 295px;
        letter-spacing: 3px;
        padding: 3px 20px;
        background-color: #3f4f7c;
        border: 3px solid #6b6a7b;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        border-radius: 999px;
        font-size: 28px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .vip_icon {
          width: 177px;
          object-fit: contain;
          position: absolute;
          left: -3px;
          top: -10px;
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .location {
        .address_name {
          font-size: 38px;
          margin-left: 15px;

          .location_icon {
            font-size: 50px;
          }
        }
      }

      .meter {
        font-size: 38px;
      }
    }
  }
}

.recommend {
  border: 3px solid #00b9f9;
}
</style>
